<template>
    <div >
        <div class="dropdown">
            <!--            失去聚焦后关闭菜单-->
            <div @click="isOpen = !isOpen"  class="header ">
                <!--                <update-img></update-img>-->
                <img src="../assets/logo.png" alt="Avatar" class="avatar" @blur="isOpen = false"/><br>
                <span class="username">{{localUsername}}<el-icon class="iconarr"><ArrowDown /></el-icon></span>
                <i v-if="isOpen" class="arrow up"></i>
                <i v-else class="arrow down"></i>
            </div>
            <transition name="fade" >
                <ul v-if="isOpen" class="menu" >
                    <li @click="logoutClick" >安全退出</li>
                </ul>
            </transition>
        </div>
    </div>
</template>

<script setup>
    import { ref,onMounted } from 'vue';
    import { ArrowDown } from '@element-plus/icons-vue';
    import { useRouter } from 'vue-router';
    // import UpdateImg from './UpdateImg.vue';
    const router = useRouter();
    const isOpen = ref(false);
    const localUsername = ref('');
    const emit = defineEmits(['update:username']);
    //根据sessionStorage获取登录用户信息
    onMounted(() => {
        const loginUser = JSON.parse(sessionStorage.getItem('loginUser'));
        if (loginUser) {
            // 使用本地状态来存储用户名
            localUsername.value = loginUser.username;
            // 通知父组件更新username（如果需要）
            emit('update:username', loginUser.username);
        }
    });
    defineProps({
        avatar: String,
        username: {
            type: String,
            default: ''
        },
        role: String,
    });
    const logoutClick = () => {
        isOpen.value = false;
        router.push('/login')
        sessionStorage.removeItem('loginUser');
        sessionStorage.removeItem('authority');
    };
</script>

<style scoped>
    .dropdown {
        position: relative;
        display: inline-block;
        margin-left: 150px;
    }
    .header {
        cursor: pointer;
        padding: 5px;
    }
    .avatar {
        width: 60px;
        height: 60px;
        border-radius: 35%;
    }
    .username {
        margin-left: 15px;
    }
    .username .iconarr{
        float: right;
        right: -20px;
        top: -16px;
        margin-left: 10px;
    }
    .role {
        color: #999;
        font-size: 12px;
        margin-top: -6px;
        margin-left: 10px;
    }
    .arrow {
        transform: rotate(0deg);
        transition: transform 0.3s;
        font-size: 12px;
        position: absolute;
        right: 10px;
        top: 17px;
    }
    .menu {
        list-style-type: none;
        padding: 0;
        margin: 0;
        background-color: #f9f9f9;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        position: absolute;
        z-index: 1;
        min-width: 110px;
        left: -13px;
        top: 94px;
    }
    .menu li {
        cursor: pointer;
        padding: 12px 16px;
        text-align: center;
    }
    .menu li:hover {
        background-color: #eaeaea;
    }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>

